import 'package:color_dart/RgbaColor.dart';
import 'package:flutter/material.dart';

class TopSearchbar extends StatefulWidget {
  @override
  _TopSearchbarState createState() => _TopSearchbarState();
}

class _TopSearchbarState extends State<TopSearchbar> {
  final controller = TextEditingController();
  var searchText = '';
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        padding: EdgeInsets.only(left: 16, right: 16, bottom: 4, top: 10),
        child: Container(
          height: 40,
          child: new Container(
            padding: EdgeInsets.only(left: 18, right: 20),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
              color: Color.fromRGBO(245, 245, 245, 0.8),
            ),
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  width: 5.0,
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(0, 3, 2, 0),
                  child: Icon(
                    Icons.search_sharp,
                    color: rgba(191, 191, 191, 1),
                  ),
                ),
                Expanded(
                  child: Container(
                    child: TextField(
                      controller: controller,
                      decoration: InputDecoration(
                          fillColor: Colors.white,
                          contentPadding: EdgeInsets.only(bottom: 5.0),
                          border: InputBorder.none,
                          enabledBorder: InputBorder.none, //
                          focusedBorder: InputBorder.none,
                          hintText: '搜索您需要的内容',
                          hintStyle: TextStyle(color: rgba(191, 191, 191, 1))),
                      onChanged: onSearchTextChanged,
                    ),
                  ),
                ),
                searchText.isEmpty
                    ? Text('')
                    : IconButton(
                        icon: new Icon(Icons.cancel),
                        color: Colors.grey,
                        iconSize: 18.0,
                        onPressed: () {
                          controller.clear();
                          this.onSearchTextChanged('');
                          // onSearchTextChanged('');
                        },
                      ),
              ],
            ),
          ),
        ));
  }

  void onSearchTextChanged(String value) {
    this.searchText = value;
    print(searchText);
    this.setState(() {});
  }
}
